/**
* 基础菜单 天猫精灵接入产品管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>天猫精灵接入产品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中"
      style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="productId" label="Product ID" width="200">
      </el-table-column>
      <el-table-column sortable prop="brand" label="品牌" width="150">
      </el-table-column>
      <el-table-column sortable prop="deviceType" label="设备类型" width="100">
      </el-table-column>
      <el-table-column sortable prop="model" label="产品型号" width="100">
      </el-table-column>
      <el-table-column sortable prop="icon" label="产品图标" width="100">
        <template slot-scope="scope">
          <img :src="scope.row.icon" style="height:40px"/>
        </template>
      </el-table-column>
      <el-table-column sortable prop="createAt" label="添加时间" width="150">
        <template slot-scope="scope">
          <div>{{scope.row.createAt|timestampToTime}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" @click="handleEditTransform(scope.$index, scope.row)">转换配置</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="40%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        
        <el-form-item label="关联系统产品" prop="productKey"> 
          <el-select size="small" v-model="editForm.productKey" placeholder="请选择系统产品">
            <el-option v-for="product in products" :label="product.name" :value="product.id" :key="product.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="产品ID" prop="productId">
          填写天猫精灵平台中的产品ID
          <el-input size="small" v-model="editForm.productId" auto-complete="off" placeholder="产品ID"></el-input>
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          填写天猫精灵平台中的品牌
          <el-input size="small" v-model="editForm.brand" auto-complete="off" placeholder="品牌"></el-input>
        </el-form-item>
        <el-form-item label="设备类型" prop="deviceType">
          填写天猫精灵平台中的品类<a href="https://www.aligenie.com/doc/357554/eq19cg" target="_blank">参考</a>
          <el-input size="small" v-model="editForm.deviceType" auto-complete="off" placeholder="设备类型"></el-input>
        </el-form-item>
        <el-form-item label="产品型号" prop="model">
          填写天猫精灵平台中的产品型号
          <el-input size="small" v-model="editForm.model" auto-complete="off" placeholder="产品型号"></el-input>
        </el-form-item>
        <el-form-item label="产品图标" prop="icon">
          填写天猫精灵平台中的产品图标地址
          <el-input size="small" v-model="editForm.icon" auto-complete="off" placeholder="产品图标"></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitEditForm('editForm')">保存</el-button>
      </div>
    </el-dialog>

    <!-- 转换编辑界面 -->
    <el-dialog title="修改转换配置" :visible.sync="editFormTransformVisible" width="60%" @click="closeDialog">
      <el-form label-width="120px" :model="editFormTransform" :rules="rules" ref="editFormTransform">
        <vue-json-editor v-model="editFormTransform.transform" :showBtns="true" :mode="'code'" @json-save="onJsonSave" lang="zh" />
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  import {
    ProductList
  } from '@/api/productApi'
  import {
    AligenieProductList,
    AligenieProductSave
  } from '@/api/aligenieProductApi'
  import vueJsonEditor from 'vue-json-editor'
  export default {
    data() {
      return {
        nshow: true, //switch开启
        fshow: false, //switch关闭
        loading: false, //是显示加载
        editFormVisible: false,
        editFormTransformVisible: false, //控制编辑页面显示与隐藏
        title: '添加',
        editForm: {
          productKey: '',
          productId: '',
          brand: '',
          deviceType: '',
          model: '',
          icon: ''
        },
        editFormTransform:{
          productId: '',
          transform: '',
        },
        formInline:{},
        currentProductKey: '',
        categories: [],
        // rules表单验证
        rules: {},
        showUpload: false,
        listData:[],
        products: [],
        // 分页参数
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10
        }
      }
    },
    // 注册组件
    components: {
      vueJsonEditor
    },
    /**
     * 数据发生改变
     */

    /**
     * 创建完毕
     */
    created() {
      this.getdata(this.formInline)
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      getdata(parameter) {
        this.loading = true

        AligenieProductList(parameter)
        .then(res => {
          this.loading = false
          this.listData = res
        }, () => {
          this.loading = false
        })
        
        ProductList(parameter)
          .then(res => {
            this.loading = false
            this.products = res.data
          }, () => {
            this.loading = false
          })
      },
      // 分页插件事件
      callFather(parm) {
        this.formInline.page = parm.currentPage
        this.formInline.limit = parm.pageSize
        this.getdata(this.formInline)
      },
      // 搜索事件
      search() {
        this.getdata(this.formInline)
      },
      randomString(len) {
        len = len || 32;
        var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
        var maxPos = $chars.length;
        var pwd = '';
        for (var i = 0; i < len; i++) {
          pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
      },
      onShowUpload() {
        this.showUpload = true
      },
      onHideUpload() {
        this.showUpload = false
      },
      getUploadAction() {
        return window.apiBaseUrl + "/product/uploadImg/" + this.editForm.id
      },
      getAuthHeaders() {
        return {
          'Authorization': 'Basic ' + localStorage.getItem('logintoken')
        }
      },
      uploadSuccess(response) {
        this.editForm.img = response
        this.showUpload = false
      },
      handleEdit(index, row) {
        this.editFormVisible = true
        if (row != undefined && row != 'undefined') {
          this.showUpload = false
          this.title = '编辑产品'
          this.editForm.productKey = row.productKey
          this.editForm.productId = row.productId
          this.editForm.brand = row.brand
          this.editForm.deviceType = row.deviceType
          this.editForm.model = row.model
          this.editForm.icon = row.icon
        } else {
          this.title = '添加产品'
          this.editForm.productKey = ''
          this.editForm.productId = ''
          this.editForm.brand = ''
          this.editForm.deviceType = ''
          this.editForm.model = ''
          this.editForm.icon = ''
        }
      },
      handleEditTransform(index,row){
        this.editFormTransformVisible = true
        if (row != undefined && row != 'undefined') {
          this.editFormTransform.productId = row.productId
          this.editFormTransform.transform = JSON.parse(row.transform)
        }
      },
      submitEditForm(editData) {
        this.$refs[editData].validate(valid => {
          if (valid) {
            AligenieProductSave(this.editForm).then(() => {
              this.editFormVisible = false
              this.loading = false
              this.$message({
                type: 'success',
                message: '保存成功！'
              })
              this.search()
            }, () => {
              this.editFormVisible = false
              this.loading = false
            })
          }
        })
      },
      onJsonSave(json){
        this.editFormTransform.transform=JSON.stringify(json)
        AligenieProductSave(this.editFormTransform).then(() => {
          this.editFormTransformVisible = false
          this.loading = false
          this.$message({
            type: 'success',
            message: '保存成功！'
          })
          this.search()
        }, () => {
          this.editFormTransformVisible = false
          this.loading = false
        })
      },
      // 关闭编辑、增加弹出框
      closeDialog() {
        this.editFormTransformVisible = false
        this.editFormVisible = false
      }
    }
  }
</script>

<style>
  .jsoneditor-vue {
    height: 500px !important;
  }

</style>

<style scoped>
  .user-search {
    margin-top: 20px;
  }

</style>
